(function () {
  const position_name = ["大数据分析", "计算机视觉", "数据库管理", "数据挖掘", "图像算法"]
  // 经验需求+学位需求（双饼图）
  companyExperienceDegree(position_name)

  // 福利词云图
  welfareNum(position_name)

  // console.log(echarts.version)
  // 工资区间（堆叠条线图）
  wageRange(position_name)

  // 公司类型(柱状图【数据集】)
  companyTypeNum(position_name)

  // 公司规模(折柱图)
  companySize(position_name)

  // 地区工作地图
  workMap(position_name)

  // 轮播图数据
  carouselChart(position_name)


  // 轮播图数据
  function carouselChart(position_name) {
    const initdata = csvToJson("./data/roll_data.csv")
    let data_link = []
    let data_date = []
    let data_name = []
    let data_region = []
    let data_salary = []
    // console.log(initdata)
    for (var i = 0; i < initdata.length - 1; i++) {
      let data = Object.values(initdata[i])
      let name = data[1]
      let region = data[3]
      let salary = data[4].replace("\r", "")
      let date = data[0]
      let link = data[2]
      data_name.push(name)
      data_link.push(link)
      data_region.push(region)
      data_salary.push(salary)
      data_date.push(date)
    };
    // console.log(data_name)
    // console.log(data_date)
    // console.log(data_salary)
    // console.log(data_link)
    // console.log(data_region)
    const getdiv_list = document.getElementById("r-b-list");
    const getul = getdiv_list.getElementsByTagName("ul");
    const getli = getul[0].getElementsByTagName("li");

    // let a = document.querySelector(".wrapper .content .xpanel-wrapper .r-b-content ul li a")
    for (var i = 0; i < getli.length; i++) {
      let geta = getli[i].getElementsByTagName("a")[0];
      geta.href = data_link[i];
      let getdiv = geta.getElementsByTagName("div")
      getdiv[0].innerHTML = data_date[i]
      getdiv[1].innerHTML = data_name[i]
      getdiv[2].innerHTML = data_region[i]
      getdiv[3].innerHTML = data_salary[i]
    }
    console.log(getli)

  }


  // 地区工作+地图
  function workMap(position_name) {
    const workmap = csvToJson("./data/district_jobs.csv")
    const initdata = ['黑龙江', '青海', '陕西', '重庆', '辽宁', '贵州', '西藏', '福建', '甘肃', '湖南',
      '湖北', '海南', '浙江', '河南', '河北', '江西', '江苏', '新疆', '广西', '广东', '山西', '山东', '安徽',
      '宁夏', '天津', '四川', '吉林', '北京', '内蒙古', '云南', '上海']
    let workmap_name = []
    let workmap_num = []
    for (var i = 0; i < workmap.length - 1; i++) {
      let data = Object.values(workmap[i])
      let name = data[0]
      let num = data[1].replace("\r", "")
      workmap_name.push(name)
      workmap_num.push(num * 1)
    };
    for (var i = 0; i < initdata.length; i++) {
      var index = workmap_name.indexOf(initdata[i]);
      if (index == -1) {
        workmap_num.splice(i, 0, 0)
      }
    }
    console.log(workmap_name)
    console.log(workmap_num)
    const workdata = []
    for (var i = 0; i < workmap_num.length; i++) {
      let obj = {}
      obj.name = initdata[i]
      obj.value = workmap_num[i]
      workdata.push(obj)
    }
    console.log(workdata)
    // 画图
    const work_map = document.querySelector('#work_map');
    const myChart = echarts.init(work_map, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    const option = {
      title: {
        text: '全国工作招聘数量',
        subtext: '数据源：前程无忧',
        x: 'center',
        y: "7%",
        textStyle: {
          color: '#e7e7e7',
          fontStyle: 'normal',
          fontWeight: 'bolder',
          // fontFamily:'楷体',
          fontSize: 18
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: '名称：招聘数量<br/>省份：{b}<br/>数值：{c}'
      },

      dataRange: {
        min: 0,
        max: Math.max.apply(null, workmap_num),
        x: 'left',
        y: 'bottom',
        text: ['高', '低'],           // 文本，默认为数值文本
        calculable: true,
        inRange: {
          // color: ['#FFFFFF', "#7feff3", '#7feff3' ,'#6666FF'],
          color: ['#6666FF', "#71aee0", '#7feff3' ,'#FFFFFF'],
          symbolSize: [20, 20]
        }
      },
      series: [
        {
          name: '数据',
          type: 'map',
          mapType: 'china',
          roam: false,
          itemStyle: {
            normal: { label: { show: true } },
            emphasis: { label: { show: true } }
          },
          data: workdata
        }
      ]
    };
    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }
    window.addEventListener('resize', myChart.resize);
  }

  // 经验需求+学位需求
  function companyExperienceDegree(position_name) {
    // 经验需求
    const experience_initdata = ['无需经验', '8-9年经验', '5-7年经验', '3-4年经验', '2年经验', '1年经验', "10年以上经验"]
    const degree_initdata = ['硕士', '本科', '大专', '博士']
    const experience_data = csvToJson("./data/experience_requirements.csv")
    let experience_data_name = []
    let experience_data_num = []
    for (var i = 0; i < experience_data.length - 1; i++) {
      let data = Object.values(experience_data[i])
      let name = data[0]
      let num = data[1].replace("\r", "")
      experience_data_name.push(name)
      experience_data_num.push(num * 1)
    };
    for (var i = 0; i < experience_initdata.length; i++) {
      var index = experience_data_name.indexOf(experience_initdata[i]);
      if (index == -1) {
        experience_data_num.splice(i, 0, 0)
      }
    }
    console.log(experience_data_name)
    console.log(experience_data_num)

    const degree_data = csvToJson("./data/degree_requirements.csv")
    let degree_data_name = []
    let degree_data_num = []
    for (var i = 0; i < degree_data.length - 1; i++) {
      let data = Object.values(degree_data[i])
      let name = data[0]
      let num = data[1].replace("\r", "")
      degree_data_name.push(name)
      degree_data_num.push(num * 1)
    };
    for (var i = 0; i < degree_initdata.length; i++) {
      var index = degree_data_name.indexOf(degree_initdata[i]);
      if (index == -1) {
        degree_data_num.splice(i, 0, 0)
      }
    }
    console.log(degree_data_name)
    console.log(degree_data_num)

    // 双饼图画图
    var type_demand = document.querySelector('#experience_degree');
    var myChart = echarts.init(type_demand, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
    var option;
    option = {
      // title: [
      //   {
      //     text: '',
      //     x: '60',
      //     y: '8',
      //   },
      //   {
      //     text: '',     // '/n'代表换行
      //     borderColor: '#000',
      //     textStyle: { // 标题样式
      //       fontSize: 18
      //     },
      //     left: '59%', // 位置
      //     top: '5%' // 位置
      //   }
      // ],
      label: {
        normal: {
          show: true,
          position: 'outside',
          formatter: '{c}'
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b} : {c} ({d}%)'
      },
      // legend: {
      //   bottom: 10,
      //   left: 'center',
      //   data: [...experience_data_name, ...degree_data_name]
      // },
      series: [
        {
          type: 'pie',
          radius: '70%',
          center: ['30%', '50%'],
          data: [
            { value: experience_data_num[0], name: experience_data_name[0], itemStyle: { color: randomColor() } },
            { value: experience_data_num[1], name: experience_data_name[1], itemStyle: { color: randomColor() } },
            { value: experience_data_num[2], name: experience_data_name[2], itemStyle: { color: randomColor() } },
            { value: experience_data_num[3], name: experience_data_name[3], itemStyle: { color: randomColor() } },
            { value: experience_data_num[4], name: experience_data_name[4], itemStyle: { color: randomColor() } },
            { value: experience_data_num[5], name: experience_data_name[5], itemStyle: { color: randomColor() } },
            { value: experience_data_num[6], name: experience_data_name[6], itemStyle: { color: randomColor() } },
          ],
          labelLine: {
            normal: {
              length: 5, // 修改引导线第一段的长度
              length2: 5, // 修改引导线第二段的长度
              lineStyle: {
                color: "red" // 修改引导线的颜色
              }
            },
          },

          // emphasis: {
          //   itemStyle: {
          //     shadowBlur: 0,
          //     shadowOffsetX: 0,
          //     shadowColor: 'rgba(0, 0, 0, 0.5)'
          //   }
          // }
        },
        {
          type: 'pie',
          radius: '70%',
          center: ['78%', '51%'],
          data: [
            { value: degree_data_num[1], name: degree_data_name[1], itemStyle: { color: randomColor() } },
            { value: degree_data_num[0], name: degree_data_name[0], itemStyle: { color: randomColor() } },
            { value: degree_data_num[2], name: degree_data_name[2], itemStyle: { color: randomColor() } },
            { value: degree_data_num[3], name: degree_data_name[3], itemStyle: { color: randomColor() } }
          ],
          labelLine: {
            normal: {
              length: 5, // 修改引导线第一段的长度
              length2: 5, // 修改引导线第二段的长度
              lineStyle: {
                color: "red" // 修改引导线的颜色
              }
            },
          },
          // emphasis: {
          //   itemStyle: {
          //     shadowBlur: 10,
          //     shadowOffsetX: 0,
          //     shadowColor: 'rgba(0, 0, 0, 0.5)'
          //   }
          // }
        }
      ]
    };

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }
    window.addEventListener('resize', myChart.resize);
  }

  // 岗位福利
  function welfareNum(position_name) {
    const welfare = csvToJson("./data/welfare_num.csv")
    let welfare_name = []
    let welfare_num = []
    for (var i = 0; i < 35; i++) {
      let data = Object.values(welfare[i])
      let name = data[0]
      let num = data[1].replace("\r", "")
      welfare_name.push(name)
      welfare_num.push(num * 1)
    };
    // console.log(welfare_name)
    // console.log(welfare_num)

    // 散点图画词云图
    var experience_requirements = document.querySelector('#post_welfare');
    var myChart = echarts.init(experience_requirements, null, {
      renderer: 'experience',
      useDirtyRect: false
    });
    var app = {};

    var option;

    option = {
      grid: {
        left: '10%',
        top: 5,
        right: '10%',
        bottom: 5,
      },
      itemStyle: {
        color: 'rgba(255,255,255,0)',
      },
      tooltip: {
        show: true,
        trigger: 'item',
      },
      series: [
        {
          type: 'graph',
          layout: 'force', //引导布局
          label: {
            show: true,
            color: 'auto',
          },
          // 二十八个数据
          data: [
            { name: welfare_name[0], size: 30, color: randomColor(), x: 36, y: 42, val: welfare_num[0] },
            { name: welfare_name[1], size: 25, color: randomColor(), x: 126, y: 40, val: welfare_num[1] },
            { name: welfare_name[2], size: 25, color: randomColor(), x: -10, y: 88, val: welfare_num[2] },
            { name: welfare_name[3], size: 23, color: randomColor(), x: 75, y: 90, val: welfare_num[3] },
            { name: welfare_name[4], size: 23, color: randomColor(), x: 145, y: 62, val: welfare_num[4] },
            { name: welfare_name[5], size: 23, color: randomColor(), x: 65, y: 67, val: welfare_num[5] },
            { name: welfare_name[6], size: 22, color: randomColor(), x: 235, y: 50, val: welfare_num[6] },
            { name: welfare_name[7], size: 22, color: randomColor(), x: -100, y: 87, val: welfare_num[7] },
            { name: welfare_name[8], size: 22, color: randomColor(), x: 250, y: 90, val: welfare_num[8] },
            { name: welfare_name[9], size: 21, color: randomColor(), x: -100, y: 28, val: welfare_num[9] },
            { name: welfare_name[10], size: 20, color: randomColor(), x: -95, y: 48, val: welfare_num[10] },
            { name: welfare_name[11], size: 19, color: randomColor(), x: -90, y: 68, val: welfare_num[11] },
            { name: welfare_name[12], size: 18, color: randomColor(), x: -10, y: 66, val: welfare_num[12] },
            { name: welfare_name[13], size: 17, color: randomColor(), x: 250, y: 30, val: welfare_num[13] },
            { name: welfare_name[14], size: 16, color: randomColor(), x: 141, y: 80, val: welfare_num[14] },
            { name: welfare_name[15], size: 15, color: randomColor(), x: 250, y: 68, val: welfare_num[15] },
            { name: welfare_name[16], size: 14, color: randomColor(), x: 190, y: 92, val: welfare_num[16] },
            { name: welfare_name[17], size: 13, color: randomColor(), x: 185, y: 30, val: welfare_num[17] },
            { name: welfare_name[18], size: 12, color: randomColor(), x: -37, y: 25, val: welfare_num[18] },
            { name: welfare_name[19], size: 11, color: randomColor(), x: 202, y: 70, val: welfare_num[19] },
            { name: welfare_name[20], size: 10, color: randomColor(), x: 185, y: 45, val: welfare_num[20] },
            { name: welfare_name[21], size: 9, color: randomColor(), x: -40, y: 50, val: welfare_num[21] },
            { name: welfare_name[22], size: 9, color: randomColor(), x: 120, y: 24, val: welfare_num[22] },
            { name: welfare_name[23], size: 8, color: randomColor(), x: -38, y: 38, val: welfare_num[23] },
            { name: welfare_name[24], size: 8, color: randomColor(), x: 0, y: 22, val: welfare_num[24] },
            { name: welfare_name[25], size: 7, color: randomColor(), x: 30, y: 22, val: welfare_num[25] },
            { name: welfare_name[26], size: 7, color: randomColor(), x: 135, y: 92, val: welfare_num[26] },
            { name: welfare_name[27], size: 7, color: randomColor(), x: 68, y: 22, val: welfare_num[27] }].map((item) => ({
              name: item.name,
              //   draggable: false,
              itemStyle: {
                color: 'rgba(255,255,255,0)',
              },
              value: item.val,
              x: item.x,
              y: item.y,
              fixed: true,
              label: {
                color: item.color,
                fontSize: item.size,
              },
            })),
        },
      ],
    };

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  }

  // 工资区间
  function wageRange(position_name) {
    const initdata = ['5.0-10.0', '30.0-40.0', '20.0-30.0', '15.0-20.0', '10.0-15.0', '1.0-5.0']
    // const position_name = ["大数据分析", "计算机视觉", "数据库管理", "数据挖掘", "图像算法"]
    // 大数据
    const big_data = csvToJson("./data/salary_range_" + position_name[0] + ".csv")
    let big_data_name = []
    let big_data_num = []
    for (var i = 0; i < big_data.length - 1; i++) {
      let data = Object.values(big_data[i])
      let name = data[0]
      let num = data[1].replace("\r", "")
      big_data_name.push(name)
      big_data_num.push(num * 1)
    };
    for (var i = 0; i < initdata.length; i++) {
      var index = big_data_name.indexOf(initdata[i]);
      if (index == -1) {
        big_data_num.splice(i, 0, 0)
      }
    }
    console.log(big_data_name)
    console.log(big_data_num)

    // 计算机视觉
    const computer_vision = csvToJson("./data/salary_range_" + position_name[1] + ".csv")
    let computer_vision_name = []
    let computer_vision_num = []
    for (var i = 0; i < computer_vision.length - 1; i++) {
      let data = Object.values(computer_vision[i])
      let name = data[0]
      let num = data[1].replace("\r", "")
      computer_vision_name.push(name)
      computer_vision_num.push(num * 1)
    }
    for (var i = 0; i < initdata.length; i++) {
      var index = computer_vision_name.indexOf(initdata[i]);
      if (index == -1) {
        computer_vision_num.splice(i, 0, 0)
      }
    }
    console.log(computer_vision_name)
    console.log(computer_vision_num)

    // 数据库管理
    const database_anagement = csvToJson("./data/salary_range_" + position_name[2] + ".csv")
    let database_anagement_name = []
    let database_anagement_num = []
    for (var i = 0; i < database_anagement.length - 1; i++) {
      let data = Object.values(database_anagement[i])
      let name = data[0]
      let num = data[1].replace("\r", "")
      database_anagement_name.push(name)
      database_anagement_num.push(num * 1)
    }
    for (var i = 0; i < initdata.length; i++) {
      var index = database_anagement_name.indexOf(initdata[i]);
      if (index == -1) {
        database_anagement_num.splice(i, 0, 0)
      }
    }
    console.log(database_anagement_name)
    console.log(database_anagement_num)

    // 数据挖掘
    const data_mining = csvToJson("./data/salary_range_" + position_name[3] + ".csv")
    let data_mining_name = []
    let data_miningt_num = []
    for (var i = 0; i < data_mining.length - 1; i++) {
      let data = Object.values(data_mining[i])
      let name = data[0]
      let num = data[1].replace("\r", "")
      data_mining_name.push(name)
      data_miningt_num.push(num * 1)
    }
    for (var i = 0; i < initdata.length; i++) {
      var index = data_mining_name.indexOf(initdata[i]);
      if (index == -1) {
        data_miningt_num.splice(i, 0, 0)
      }
    }
    console.log(data_mining_name)
    console.log(data_miningt_num)

    // 图像算法
    const image_algorithm = csvToJson("./data/salary_range_" + position_name[4] + ".csv")
    let image_algorithm_name = []
    let image_algorithm_num = []
    for (var i = 0; i < image_algorithm.length - 1; i++) {
      let data = Object.values(image_algorithm[i])
      let name = data[0]
      let num = data[1].replace("\r", "")
      image_algorithm_name.push(name)
      image_algorithm_num.push(num * 1)
    }
    for (var i = 0; i < initdata.length; i++) {
      var index = image_algorithm_name.indexOf(initdata[i]);
      if (index == -1) {
        image_algorithm_num.splice(i, 0, 0)
      }
    }
    console.log(image_algorithm_name)
    console.log(image_algorithm_num)

    // 画图
    salary_range = document.querySelector("#salary_range")
    // var dom = document.getElementById('#salary_rangery_range');
    var myChart = echarts.init(salary_range, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};

    var option;

    option = {
      tooltip: {
        textStyle: {
          color: "FFFFFF" //设置文字颜色
        },
        trigger: 'axis'
      },
      legend: {
        textStyle: {
          borderColor: 'rgb(238, 245, 250)',
          color: 'rgb(238, 245, 250)',
        },
        data: ['大数据', '计算机视觉', '数据库管理', '数据挖掘', '图像算法']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },

      xAxis: {
        axisLine: {
          lineStyle: {
            color: 'rgb(238, 245, 250)',
            width: 1, //这里是为了突出显示加上的  
          }
        },
        type: 'category',
        boundaryGap: false,
        data: [initdata[5], initdata[0], initdata[4], initdata[3], initdata[2], initdata[1]]
      },
      yAxis: {
        axisLine: {
          lineStyle: {
            color: 'rgb(238, 245, 250)',
            width: 1, //这里是为了突出显示加上的  
          }
        },
        type: 'value'
      },
      series: [
        {
          name: '大数据',
          type: 'line',
          stack: 'Total',
          data: [big_data_num[5], big_data_num[0], big_data_num[4], big_data_num[3], big_data_num[2], big_data_num[1]]
        },
        {
          name: '计算机视觉',
          type: 'line',
          stack: 'Total',
          data: [computer_vision_num[5], computer_vision_num[0], computer_vision_num[4], computer_vision_num[3], computer_vision_num[2], computer_vision_num[1]]
        },
        {
          name: '数据库管理',
          type: 'line',
          stack: 'Total',
          data: [database_anagement_num[5], database_anagement_num[0], database_anagement_num[4], database_anagement_num[3], database_anagement_num[2], database_anagement_num[1]]
        },
        {
          name: '数据挖掘',
          type: 'line',
          stack: 'Total',
          data: [data_miningt_num[5], data_miningt_num[0], data_miningt_num[4], data_miningt_num[3], data_miningt_num[2], data_miningt_num[1]]
        },
        {
          name: '图像算法',
          type: 'line',
          stack: 'Total',
          data: [image_algorithm_num[5], image_algorithm_num[0], image_algorithm_num[4], image_algorithm_num[3], image_algorithm_num[2], image_algorithm_num[1]]
        }
      ]
    };

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }
    window.addEventListener('resize', myChart.resize);
  }

  // 公司类型
  function companyTypeNum(position_name) {
    const initdata = ['民营公司', '外资（非欧美）', '外资（欧美）', '国企', '合资', '创业公司', "上市公司"]
    const big_data = csvToJson("./data/company_type_num_" + position_name[0] + ".csv")
    let big_data_name = []
    let big_data_num = []
    for (var i = 0; i < big_data.length - 1; i++) {
      let data = Object.values(big_data[i])
      let name = data[0]
      let num = data[1].replace("\r", "")
      big_data_name.push(name)
      big_data_num.push(num * 1)
    };
    for (var i = 0; i < initdata.length; i++) {
      var index = big_data_name.indexOf(initdata[i]);
      if (index == -1) {
        big_data_num.splice(i, 0, 0)
      }
    }
    console.log(big_data_name)
    console.log(big_data_num)

    // 计算机视觉
    const computer_vision = csvToJson("./data/company_type_num_" + position_name[1] + ".csv")
    let computer_vision_name = []
    let computer_vision_num = []
    for (var i = 0; i < computer_vision.length - 1; i++) {
      let data = Object.values(computer_vision[i])
      let name = data[0]
      let num = data[1].replace("\r", "")
      computer_vision_name.push(name)
      computer_vision_num.push(num * 1)
    }
    for (var i = 0; i < initdata.length; i++) {
      var index = computer_vision_name.indexOf(initdata[i]);
      if (index == -1) {
        computer_vision_num.splice(i, 0, 0)
      }
    }
    console.log(computer_vision_name)
    console.log(computer_vision_num)

    // 数据库管理
    const database_anagement = csvToJson("./data/company_type_num_" + position_name[2] + ".csv")
    let database_anagement_name = []
    let database_anagement_num = []
    for (var i = 0; i < database_anagement.length - 1; i++) {
      let data = Object.values(database_anagement[i])
      let name = data[0]
      let num = data[1].replace("\r", "")
      database_anagement_name.push(name)
      database_anagement_num.push(num * 1)
    }
    for (var i = 0; i < initdata.length; i++) {
      var index = database_anagement_name.indexOf(initdata[i]);
      if (index == -1) {
        database_anagement_num.splice(i, 0, 0)
      }
    }
    console.log(database_anagement_name)
    console.log(database_anagement_num)

    // 数据挖掘
    const data_mining = csvToJson("./data/company_type_num_" + position_name[3] + ".csv")
    let data_mining_name = []
    let data_miningt_num = []
    for (var i = 0; i < data_mining.length - 1; i++) {
      let data = Object.values(data_mining[i])
      let name = data[0]
      let num = data[1].replace("\r", "")
      data_mining_name.push(name)
      data_miningt_num.push(num * 1)
    }
    for (var i = 0; i < initdata.length; i++) {
      var index = data_mining_name.indexOf(initdata[i]);
      if (index == -1) {
        data_miningt_num.splice(i, 0, 0)
      }
    }
    console.log(data_mining_name)
    console.log(data_miningt_num)

    // 图像算法
    const image_algorithm = csvToJson("./data/company_type_num_" + position_name[4] + ".csv")
    let image_algorithm_name = []
    let image_algorithm_num = []
    for (var i = 0; i < image_algorithm.length - 1; i++) {
      let data = Object.values(image_algorithm[i])
      let name = data[0]
      let num = data[1].replace("\r", "")
      image_algorithm_name.push(name)
      image_algorithm_num.push(num * 1)
    }
    for (var i = 0; i < initdata.length; i++) {
      var index = image_algorithm_name.indexOf(initdata[i]);
      if (index == -1) {
        image_algorithm_num.splice(i, 0, 0)
      }
    }
    console.log(image_algorithm_name)
    console.log(image_algorithm_num)

    // 堆叠条形图
    var company_type = document.querySelector("#company_type")
    var myChart = echarts.init(company_type, null, {
      renderer: 'stack',
      useDirtyRect: false
    });
    var app = {};

    var option;
    option = {
      legend: {
        textStyle: {
          borderColor: 'rgb(238, 245, 250)',
          color: 'rgb(238, 245, 250)',
        },
      },
      tooltip: {
        textStyle: {
          color: "FFFFFF" //设置文字颜色
        },
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      dataset: {
        source: [
          ['product', ...position_name],
          [initdata[0], big_data_num[0], computer_vision_num[0], database_anagement_num[0], data_miningt_num[0], image_algorithm_num[0]],
          [initdata[1], big_data_num[1], computer_vision_num[1], database_anagement_num[1], data_miningt_num[1], image_algorithm_num[1]],
          [initdata[2], big_data_num[2], computer_vision_num[2], database_anagement_num[2], data_miningt_num[2], image_algorithm_num[2]],
          [initdata[3], big_data_num[3], computer_vision_num[3], database_anagement_num[3], data_miningt_num[3], image_algorithm_num[3]],
          [initdata[4], big_data_num[4], computer_vision_num[4], database_anagement_num[4], data_miningt_num[4], image_algorithm_num[4]],
          [initdata[5], big_data_num[5], computer_vision_num[5], database_anagement_num[5], data_miningt_num[5], image_algorithm_num[5]],
          [initdata[6], big_data_num[6], computer_vision_num[6], database_anagement_num[6], data_miningt_num[6], image_algorithm_num[6]],
        ]
      },
      xAxis: {
        type: 'category',
        axisLine: {
          lineStyle: {
            color: 'rgb(238, 245, 250)',
            width: 1, //这里是为了突出显示加上的  
          }
        }
      },
      yAxis: {
        axisLine: {
          lineStyle: {
            color: 'rgb(238, 245, 250)',
            width: 1, //这里是为了突出显示加上的  
          }
        }
      },
      // Declare several bar series, each will be mapped
      // to a column of dataset.source by default.
      series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
    };
    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }
    window.addEventListener('resize', myChart.resize);

  }

  // 公司规模
  function companySize(position_name) {
    const size_initdata = ["少于50人", "5000-10000人", "500-1000人", "50-150人", "150-500人", "10000人以上", "1000-5000人"]
    const size_data = csvToJson("./data/company_size.csv")
    let size_data_name = []
    let size_data_num = []
    for (var i = 0; i < size_data.length - 1; i++) {
      let data = Object.values(size_data[i])
      let name = data[0]
      let num = data[1].replace("\r", "")
      size_data_name.push(name)
      size_data_num.push(num * 1)
    };
    for (var i = 0; i < size_initdata.length; i++) {
      var index = size_data_name.indexOf(size_initdata[i]);
      if (index == -1) {
        size_data_num.splice(i, 0, 0)
      }
    }
    // 计算每一个的百分比
    function countPercentage(countArray) {
      var j = eval(countArray.join('+'));
      var resultArray = [];
      for (var i = 0; i < countArray.length; i++) {
        var k = Math.floor((countArray[i] / j) * 100) + "%";
        resultArray.push(k);
      }
      return resultArray;
    }
    const size_data_proportion = countPercentage(size_data_num)
    for (var i = 0; i < size_data_proportion.length; i++) {
      size_data_proportion[i] = size_data_proportion[i].replace("%", "")
      size_data_proportion[i] *= 1
    }
    console.log(size_data_name)
    console.log(size_data_num)
    console.log(size_data_proportion)
    // 画图
    var company_size = document.querySelector('#company_size');
    var myChart = echarts.init(company_size, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};

    var option;

    option = {
      tooltip: {
        textStyle: {
          color: "#000" //设置文字颜色
        },
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: randomColor()
          }
        }
      },
      grid: {
        top: "28%",
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      legend: {
        textStyle: {
          borderColor: 'rgb(238, 245, 250)',
          color: 'rgb(238, 245, 250)',
        },
        data: ["公司规模", '占比例']
      },
      xAxis: [
        {
          axisLine: {
            lineStyle: {
              color: 'rgb(238, 245, 250)',
              width: 1, //这里是为了突出显示加上的  
            }
          },
          type: 'category',
          data: size_initdata,
          axisPointer: {
            type: 'shadow'
          }
        }
      ],
      yAxis: [
        {
          axisLine: {
            lineStyle: {
              color: 'rgb(238, 245, 250)',
              width: 1, //这里是为了突出显示加上的  
            }
          },
          type: 'value',
          name: '规模',
          min: 0,
          max: 1000,
          interval: 200,
          axisLabel: {
            formatter: '{value} 人'
          }
        },
        {
          axisLine: {
            lineStyle: {
              color: 'rgb(238, 245, 250)',
              width: 1, //这里是为了突出显示加上的  
            }
          },
          type: 'value',
          name: '占比例',
          min: -30,
          max: 30,
          interval: 12,
          axisLabel: {
            formatter: '{value} %'
          }
        }
      ],
      series: [
        {
          name: '公司规模',
          type: 'bar',
          tooltip: {
            valueFormatter: function (value) {
              return value + ' 人';
            }
          },
          data: size_data_num,
          itemStyle: {
            color: 'rgb(35, 124, 240)'
          }
        },
        {
          name: '占比例',
          type: 'line',
          yAxisIndex: 1,
          tooltip: {
            valueFormatter: function (value) {
              return value + ' %';
            }
          },
          data: size_data_proportion,
          itemStyle: {
            color: 'rgb(167, 253, 164)'
          }
        }
      ]
    };

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  }

  // 随机颜色
  function randomColor() {
    return 'rgb(' + [
      Math.round(Math.random() * 250),
      Math.round(Math.random() * 250),
      Math.round(Math.random() * 250)
    ].join(',') + ')';
  }

  // 读取CSV文件
  function csvToJson(filePath) {
    let result = []
    var xhr = new XMLHttpRequest();
    xhr.open("GET", filePath, false);
    xhr.onload = function (e) {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          result = csvJSON(xhr.responseText)
        } else {
          console.error(xhr.statusText);
        }
      }
    };
    xhr.send(null);
    return result
  }

  function csvJSON(csv) {
    var lines = csv.split("\n");
    var result = [];
    var headers = lines[0].split(",");
    for (var i = 1; i < lines.length; i++) {
      var obj = {};
      var currentline = lines[i].split(",");
      for (var j = 0; j < headers.length; j++) {
        obj[headers[j]] = currentline[j];
      }
      result.push(obj);
    }
    return result;
  }

})()
